<template>
  <div class="chart" ref="rightBottomChart"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import * as echarts from 'echarts';
import { getRightBottomData } from '@/api/data-screen/right-charts';
import { color } from 'echarts/core';

let chartData = reactive;

// 获取根元素字体大小
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

// 定义一个函数，将 rem 转换为像素值
function remToPx(rem) {
  return rem * rootFontSize;
}

onMounted(() => {
  getChartData();
})

// 定时刷新（每5分钟）
// setInterval(getChartData, 5000); 


// 获取图表展示所需数据
function getChartData() {
  getRightBottomData().then(result => {
    processChartData(result.data)
    console.log(result.data)
  })
}

// 格式化获取到的数据并初始化图表
function processChartData(rawData) {
  // 按年份排序（可选）
  rawData.sort((a, b) => a.year - b.year);

  // 提取图表需要的数据结构
  const chartData = {
    // years: rawData.map(item => item.year),
    years: [2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024],
    enlistments: rawData.map(item => item.enlistment),
    awards: rawData.map(item => item.award),
    retentions: rawData.map(item => item.retention),
    clubMembers: rawData.map(item => item.clubMembers)
  };
  initRightBottomChart(chartData)
}


//右下图
const rightBottomChart = ref<HTMLElement | null>(null);
// 初始化
function initRightBottomChart(chartData) {
  if (!rightBottomChart.value) return;
  const myChart = echarts.init(rightBottomChart.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      textStyle: {
        color: '#ccc',
        fontSize: remToPx(0.9) // 图例文字大小为 0.8rem
      },
      itemWidth: remToPx(1.2), // 图例图标宽度为 1rem
      itemHeight: remToPx(0.7) // 图例图标高度为 0.6rem
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '12%',
      top: '14%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: chartData.years, // 绑定年份数据
        axisLabel: {
          show: true,
          color: '#fff'
        }
      },
    ],
    yAxis: [
      {
        type: 'value',
        // 坐标轴刻度标签的相关设置
        axisLabel: {
          show: true,
          // 刻度标签文字的颜色
          color: '#fff'
        }
      },
    ],
    series: [

      {
        name: '总入伍数',
        type: 'bar',
        color: "rgb(27, 162, 235)",
        emphasis: {
          focus: 'series'
        },
        // data: chartData.enlistments, // 绑定入伍数据
        data: [51, 70, 109, 121, 119, 126, 103, 83], // 绑定入伍数据
        label: { // 核心配置：数值标签
          show: true,          // 显示标签
          position: 'top',     // 标签位置（top/insideTop/inside等）
          formatter: '{c}',     // 显示数据值
          color: '#fff'
        },
      },
      {
        name: '社团成员入伍人数',
        type: 'bar',
        color: "red",
        emphasis: {
          focus: 'series'
        },
        // data: chartData.enlistments, // 绑定入伍数据
        data: [24, 36, 61, 71, 75, 85, 74, 59], // 绑定入伍数据
        label: { // 核心配置：数值标签
          show: true,          // 显示标签
          position: 'top',     // 标签位置（top/insideTop/inside等）
          formatter: '{c}',     // 显示数据值
          color: '#fff'
        },
      },
      {
        name: '立功受奖人数',
        type: 'bar',
        color: "#EE9A00",
        // data: chartData.awards, // 绑定立功数据
        data: [11, 19, 40, 44, 54, 79], // 绑定立功数据
        // label: { // 核心配置：数值标签
        //   show: true,          // 显示标签
        //   position: 'top',     // 标签位置（top/insideTop/inside等）
        //   formatter: '{c}',     // 显示数据值
        //   color: '#fff'
        // },
        emphasis: {
          focus: 'series'
        },

      },
      {
        name: '留队人数',
        type: 'bar',
        color: "#98e97d",
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        // data: chartData.retentions, // 绑定留队数据
        data: [5, 6, 11, 14, 30, 44], // 绑定留队数据
        // label: { // 核心配置：数值标签
        //   show: true,          // 显示标签
        //   position: 'top',     // 标签位置（top/insideTop/inside等）
        //   formatter: '{c}',     // 显示数据值
        //   color: '#fff'
        // },
        // markLine: {
        //   lineStyle: {
        //     type: 'dashed'
        //   },
        //   data: [
        //     [{ type: 'min' }, { type: 'max' }],  // 最小到最大范围线
        //   ]
        // }
      },
    ]
  }
  myChart.setOption(option);
}
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>